<template>
  <div class="order-wrapper">
    <a-spin :spinning="loading">
      <a-form-model
        ref="payForm"
        :model="payForm"
        :rules="payRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-space direction="vertical" size="large" style="width:100%">
          <a-card :bordered="false" title="联系人">
            <a-row :gutter="30">
              <a-col :span="12">
                <a-form-model-item label="联系人姓名" prop="username">
                  <a-input v-model="payForm.username" type="text" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="联系人电话" prop="phone">
                  <a-input v-model="payForm.phone" type="text" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card :bordered="false" title="服务信息">
            <a-table
              size="middle"
              :bordered="false"
              :columns="orderColumns"
              :row-key="(record) => record.id"
              :data-source="orderList"
              :pagination="false"
            >
              <template slot="name" slot-scope="text,record">
                <div class="product-cover">
                  <dl>
                    <dd>
                      <img width="88" height="88" :src="record.image" />
                    </dd>
                    <dt>
                      <h4>{{ text }}</h4>
                      <p>
                        <ellipsis :length="30">{{ record.describe }}</ellipsis>
                      </p>
                      <a-tag>{{ record.c_name }}</a-tag>
                    </dt>
                  </dl>
                </div>
              </template>
              <template slot="num">
                1
              </template>
              <template slot="amount" slot-scope="text,record">
                {{ record.price }}
              </template>
            </a-table>
          </a-card>
          <a-card :bordered="false" title="发票信息">
            温馨提示：订单完成后，您可以在个人中心-我的订单页面自助开票
          </a-card>
          <a-card :bordered="false" title="留言信息">
            <a-form-model-item :wrapper-col="{ span: 24, offset: 0 }">
              <a-textarea style="width:100%" v-model="payForm.remarks" :rows="5"></a-textarea>
            </a-form-model-item>
          </a-card>
          <a-card :bordered="false">
            <a-row type="flex" align="middle">
              <a-col :span="16" style="border-right: 1px solid #eee;text-align: right;padding-right:20px;line-height:25px;">
                <div>合计金额：<span>￥{{ amount }}</span></div>
                <div>优惠金额：<span>￥0.00</span></div>
                <div>优惠券：<span>￥0.00</span></div>
              </a-col>
              <a-col :span="4" style="padding-left:20px;border-right: 1px solid #eee;">
                <span class="txt">应付金额：</span>
                <div class="rate">￥{{ amount }}</div>
              </a-col>
              <a-col :span="4" style="padding-left:20px">
                <a-button
                  block
                  :disabled="orderList.length == 0"
                  :loading="btnLoading"
                  size="large"
                  type="danger"
                  @click="onSubmit"
                >
                  提交订单
                </a-button>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
      </a-form-model>
    </a-spin>
  </div>
</template>

<script>
import { createOrder, createOrderInfo, orderConfirm } from '@/api/order'
import Ellipsis from '@/components/Ellipsis/Ellipsis'

export default {
  components: {
    Ellipsis
  },
  name: 'OrdinaryPay',
  data () {
    const orderColumns = [
      {
        title: '服务信息',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' }
      },
      {
        title: '单价',
        dataIndex: 'price'
      },
      {
        title: '数量',
        scopedSlots: { customRender: 'num' }
      },
      {
        title: '金额',
        scopedSlots: { customRender: 'amount' }
      }
    ]
    return {
      orderColumns,
      orderList: [],
      labelCol: { span: 4 },
      wrapperCol: { offset: 1, span: 19 },
      payForm: {},
      payRules: {
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
      },
      amount: 0,
      loading: false,
      btnLoading: false,
      orderNo: ''
    }
  },
  created () {
    this.getOrderInfo(this.$route.query.ids)
  },
  methods: {
    getOrderInfo (ids) {
      this.loading = true
      const parameter = {}
      parameter['sid'] = ids
      orderConfirm(parameter).then(res => {
        if (res.status === 0) {
          if (res.result.data.length !== 0) {
            this.orderList = res.result.data
            this.amount = (res.result.total_fee).toFixed(2)
            this.loading = false
          } else {
            this.$confirm({
              title: '订单超时，请返回',
              onOk: () => {
                this.$router.go(-1)
              },
              onCancel: () => {
                this.$router.go(-1)
              }
            })
          }
        }
      })
    },
    onSubmit () {
      const app = this
      const parameter = {}
      app.btnLoading = true
      app.$refs.payForm.validate(valid => {
        if (valid) {
          parameter['sid'] = this.$route.query.ids
          createOrder(parameter).then(res => {
            if (res.status === 0) {
              app.orderNo = res.result.order_no
              createOrderInfo(app.payForm, app.orderNo).then(info => {
                if (info.status === 0) {
                  app.$router.push({ name: 'Pay', params: { no: app.orderNo } })
                } else {
                  app.$warning({
                    title: info.msg
                  })
                }
              })
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          app.btnLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.product-cover dl dd {
  width: 88px;
  float: left;
  margin-right: 20px;
}

.product-cover dl dt h4 {
  font-size: 16px;
}

.txt {
  color: #999;
}

.rate {
  font-size: 30px;
  font-weight: 700;
  color: #e52e3a;
  padding-top: 12px;
}

.order-wrapper {
  width: 1190px;
  margin: 0 auto;
}
</style>
